<template>
  <div class="section-box">
    <FrameLayout v-show="showPage === 'index'">
      <template v-slot:left>
        <Frame title="预演预案" style="height: 100%">
          <template v-slot:body>
            <div style="height: 100%">
              <div v-show="loadList" v-loading.fullscreen.lock="fullscreenLoadingIndex"
                element-loading-background="rgba(0, 0, 0, 0.4)">
                <div v-if="loadList" class="form_Rehearsal">
                  <el-form ref="ruleForm" label-width="auto" label-position="left">
                    <el-form-item label="预演类别">
                      <el-radio-group v-model="ruleForm.rehearsalType" class="margtop5">
                        <el-radio label="1" @click.native.prevent="rehearsalTypechange('1')">预报预演
                        </el-radio>
                        <el-radio label="2" @click.native.prevent="rehearsalTypechange('2')">历史复盘
                        </el-radio>
                        <el-radio label="3" @click.native.prevent="rehearsalTypechange('3')">极端情景
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="隐患类别">
                      <el-radio-group v-model="ruleForm.hiddendangertype" class="margtop5">
                        <el-radio label="1" @click.native.prevent="hiddendangertypechange('1')">桥梁堵水
                        </el-radio>
                        <el-radio label="2" @click.native.prevent="hiddendangertypechange('2')">工程溃决
                        </el-radio>
                        <el-radio label="3" @click.native.prevent="hiddendangertypechange('3')">洪水顶托
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="生成时间">
                      <el-date-picker v-model="TimeShengcheng" type="datetimerange" start-placeholder="开始日期"
                        end-placeholder="结束日期" style="width: 100%" format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm" :default-time="[timebeg, timebeg]"
                        @change="TimeShengchengChange" />
                    </el-form-item>
                    <el-form-item label="预演时间">
                      <el-date-picker v-model="TimeYuyan" type="datetimerange" start-placeholder="开始日期"
                        end-placeholder="结束日期" style="width: 100%" format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm" :default-time="[timebeg, timebeg]" @change="TimeYuyanChange" />
                    </el-form-item>
                  </el-form>
                </div>
                <div class="collapse_table">
                  <ul>
                    <!-- <li
                      v-for="(item, index) in listYudata"
                      :key="index"
                      :class="{ activeList: selectNum == index }"
                      @click="ListStyle(item, index)"
                    > -->
                    <li v-for="(item, index) in listYudata" :key="index" :class="{ activeList: selectNum == index }">
                      <div class="collapse_table_title">
                        <p :title="item.name">{{ item.name }}</p>
                        <span v-if="item.calculationState == -1" class="errorColor">计算失败</span>
                        <span v-if="item.calculationState == 0" class="noColor">未计算</span>
                        <span v-if="item.calculationState == 1" class="orangeColor">计算中</span>
                        <span v-if="item.calculationState == 2" class="greenColor">计算完成</span>
                      </div>
                      <p>预演类别：<span>{{ item.rehearsalType }}</span></p>
                      <p>隐患类型：<span>{{ item.hiddendangertype || '无' }}</span></p>
                      <p>预演时段：<span style="letter-spacing:-1px">{{
                        item.predictionStart | dateformat
                      }} - {{ item.predictionEnd | dateformat }}</span></p>
                      <p style="border-bottom:1px solid #335875">生成时间：<span>{{ item.createDDate | dateformat }}</span></p>
                      <div class="btnCjfa_cur">
                        <!-- <span class="btnCjfa" @click.stop="getDeleteRehearsal(item)"> -->
                          <span class="btnCjfa" @click.stop="openTipDialog(item)">
                          <i class="el-icon-delete" />
                          删除
                        </span>
                        <span v-if="item.calculationState == 0" class="btnCjfa" @click.stop="CalcRehearsalSchemeli(item)">
                          <i class="el-icon-setting" />
                          计算
                        </span>
                        <span v-if="item.calculationState == 2" class="btnCjfa" @click.stop="btnPreview(item, index)">
                          <i class="el-icon-video-play" />
                          加载方案
                        </span>
                      </div>
                    </li>
                    <infinite-loading ref="infiniteLoading" @infinite="infiniteHandler">
                      <span slot="no-more"> &nbsp; </span>
                      <template v-if="listYudata.length <= 0">
                        <div slot="no-results" class="noData">当前无预演</div>
                      </template>
                      <div v-else slot="no-results">&nbsp;</div>
                    </infinite-loading>
                  </ul>
                </div>
              </div>
              <div v-show="!loadList" style="height: 92%">
                <Faxq ref="faxqRef" />
                <div class="btm_faxq">
                  <span class="btnCjfa" @click="withdraw">退出方案</span>
                  <span class="btnCjfa" @click="exportBtn">导出报告</span>
                </div>
              </div>
            </div>
          </template>
        </Frame>
      </template>
      <template v-slot:center />
      <template v-slot:right>
        <Frame v-show="!loadList" :title="nameInfoTop + '详情'" style="height: 100%" :panelStretch="'rights'">
          <template v-slot:body>
            <div class="tab">
              <span v-for="(item, index) in tabTitList" :key="index" :class="{ activeTab: tabTitListNum == index }"
                class="tabTit" @click="change(index)">
                {{ item }}
              </span>
            </div>
            <div v-show="tabTitListNum == 0" class="water-table">
              <rainwater ref="showRainwater" />
            </div>
            <div v-show="tabTitListNum == 1" class="water-table">
              <contrastinfo ref="showContrastinfo" />
            </div>
            <div v-show="tabTitListNum == 2" class="water-table">
              <defense ref="showDefense" />
            </div>
          </template>
        </Frame>
      </template>
    </FrameLayout>
    <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'floodDlog'" mask class="MeasuredDlgStyle">
      <template v-slot:body>
        <floodDlog />
      </template>
    </Dlgdiv>
    <Dlgdivv v-if="this.$store.getters.dlgParams.name === 'DLGYYFXD'" mask class="MeasuredDlgStyle">
      <template v-slot:title>详情</template>
      <template v-slot:body>
        <dlgyyfxd :listStyleobj="ListStyleobj" :tablist="[0]" />
      </template>
    </Dlgdivv>
    <Dlgdivv v-if="this.$store.getters.dlgParams.name == 'FZCCuZINFO'" :title="false" mask class="MeasuredDlgStyle">
      <template v-slot:title>详情</template>
      <template v-slot:body>
        <Dlgyyfxd :tablist="tablists" />
      </template>
    </Dlgdivv>
    <!-- 删除提示 -->
    <DlgdivTip v-if="tipDialogShow"  :ismask="true">
      <template v-slot:title> 删除提示 </template>
      <template v-slot:body>
        <div class="body-inner">
          <p class="contant">确定要删除该方案吗？</p>
        </div>
    </template>
    <template v-slot:footer>
      <div class="btn-row">
        <div class="btn" @click="cancelTipDialog">
          <img src="@/assets/dialog/tipCancel.png" alt="">
        </div>
        <div class="btn" @click="confirmTipDialog">
          <img src="@/assets/dialog/tipSubmit.png" alt="">
        </div>
      </div>
    </template>
    </DlgdivTip>
  </div>
</template>
<script>
import {
  GetRLList,
  DeleteRehearsal,
  CalcRehearsalScheme,
  GetRehearsalState
} from '@/api/xuna.js'
import hiddenDanger from '../../../map/cesium/mixins/hiddenDanger'

import Faxq from '../Rehearsal/schemeDetailsFaxq.vue'
import rainwater from '../reserveplan/rainwater.vue'
import contrastinfo from '../reserveplan/contrastinfo.vue'
import defense from '../reserveplan/defense.vue'
import dlgyyfxd from '@/views/components/dlgyyfxd.vue'
import floodDlog from '@/views/components/floodDlog.vue'

export default {
  name: 'Risk',
  components: {
    Faxq,
    rainwater,
    contrastinfo,
    defense,
    dlgyyfxd,
    floodDlog
  },
  mixins: [hiddenDanger],
  data() {
    return {
      showPage: 'index',
      RehearsalState: '0',
      showCompontframe: false,
      fullscreenLoadingIndex: false,
      tabTitList: ['雨水情', '对照信息', '防御建议'],
      tabTitListNum: 0,
      detailsd: '',
      timebeg: this.$moment().format('HH:mm:ss'),
      ruleForm: {
        page: 1,
        limit: 10,
        wswscd: this.$store.getters.basin,
        rehearsalType: '', // 预演类别 1预报预演、2历史复盘、3极端情景
        hiddendangertype: '', // 隐患类别 1桥梁堵水、2工程溃决、3洪水顶托
        createStart: this.$moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm'), // 生成开始时间
        createEnd: this.$moment().format('YYYY-MM-DD HH:mm'), // 生成结束时间
        rehearsalStart: this.$moment().subtract(8, 'hour').format('YYYY-MM-DD HH:mm'), // 预演开始时间
        rehearsalEnd: this.$moment().format('YYYY-MM-DD HH:mm')// 预演结束时间
      },
      selectNum: '-1',
      showCompont: '0',
      TimeShengcheng: [this.$moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm'), this.$moment().format(
        'YYYY-MM-DD HH:mm')],
      TimeYuyan: [this.$moment().subtract(8, 'hour').format('YYYY-MM-DD HH:mm'), this.$moment().format(
        'YYYY-MM-DD HH:mm')],
      listYudata: [], // 列表
      nameInfoTop: '',
      planCurrSel: {},
      loadId: '',
      loadList: true,
      isRightTab: false,
      isRightTab1: false,
      isRightTab2: false,
      ListStyleobj: {
        'stTime': '',
        'enTime': '',
      },
      tablists: [],
      tipDialogShow: false, //删除弹窗
      faId:undefined, //方案id
    }
  },
  computed: {
    basin() {
      return this.$store.getters.basin
    }
  },
  watch: {
    basin: {
      handler: function (name) {
        this.$nextTick(() => {
          this.ruleForm.wswscd = name
          this.resetList()
        })
      },
      immediate: true
    }
  },
  created() {
    // console.log(this.$route)
    this.$store.dispatch('rightFold', true)
    if (this.$route.params.isflg) {
      this.btnPreview(this.$route.params)
    }
  },
  mounted() {
    this.$eventBus.$on('FZCINFO', res => {
      let ind = this.selectNum;
      let lit = this.listYudata;
      let arlit = {};
      if (ind != '-1') {
        this.tablists = ['5'];
        arlit = lit[ind];
      } else {
        this.tablists = []
      }

      let stbeigin = arlit.predictionStart ? this.$moment(arlit.predictionStart).format('YYYY-MM-DD HH:mm') : '';
      let stend = arlit.predictionEnd ? this.$moment(arlit.predictionEnd).format('YYYY-MM-DD HH:mm') : '';
      let params = {
        'Ewcode': res.ADCD,
        'strBegin': stbeigin,
        'strEnd': stend,
      };
      // console.log(params)
      this.$store.getters.dlgParams.params = params;
      this.$store.getters.dlgParams.name = 'FZCCuZINFO'
    })
  },
  methods: {
    // 右侧切换
    change(index) {
      // console.log(index)
      this.tabTitListNum = index
      this.$store.getters.pageState.yuAn_YYYA_Right_Type = index
      if (index === 0 && this.isRightTab === false) {
        this.$refs.showRainwater.getGetRehearsalPZ(this.loadId)
        this.isRightTab = true
      } else if (index === 1 && this.isRightTab1 === false) {
        this.$refs.showContrastinfo.getGetRehearsalWarning(this.loadId)
        this.isRightTab1 = true
      } else if (index === 2 && this.isRightTab2 === false) {
        this.$refs.showDefense.getGetRiskDrowningList(this.loadId)
        this.isRightTab2 = true
      }
    },
    TimeShengchengChange(val) {
      this.ruleForm.createStart = val[0]
      this.ruleForm.createEnd = val[1]
      this.TimeShengcheng = val
      this.resetList()
    },
    TimeYuyanChange(val) {
      this.ruleForm.rehearsalStart = val[0]
      this.ruleForm.rehearsalEnd = val[1]
      this.TimeYuyan = val
      this.resetList()
    },
    rehearsalTypechange(e) {
      e === this.ruleForm.rehearsalType ? (this.ruleForm.rehearsalType = '') : (this.ruleForm.rehearsalType = e)
      this.resetList()
    },
    hiddendangertypechange(e) {
      e === this.ruleForm.hiddendangertype ? (this.ruleForm.hiddendangertype = '') : (this.ruleForm.hiddendangertype = e)
      this.resetList()
    },
    // 加载更多
    infiniteHandler($state) {
      this.getGetRLList($state)
    },
    // 重置
    resetList() {
      this.ruleForm.page = 1
      this.listYudata = []
      this.$nextTick(() => {
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
      })
    },
    // 加载方案
    btnPreview(item, ind) {
      if (!item.id) {
        return
      }
      this.selectNum = ind;
      console.log(item);
      this.loadId = item.id
      this.$nextTick(() => {
        this.$refs.faxqRef.faxqID = item.id
        this.$refs.faxqRef.getSelRehearsal()
        // this.$refs.faxqRef.echarresize(2)
        this.$refs.faxqRef.clientWidth(2)
        this.$refs.showRainwater.getGetRehearsalPZ(this.loadId)
      })
      this.$store.dispatch('rightFold', false)
      this.nameInfoTop = item.name
      this.loadList = false
      this.$store.getters.pageState.yuAn_YYYA_Load = false
      this.$store.getters.pageState.planId = item.id;
      this.ListStyleobj.stTime = this.$moment(item.predictionStart).format('YYYY-MM-DD HH:mm')
      this.ListStyleobj.enTime = this.$moment(item.predictionEnd).format('YYYY-MM-DD HH:mm')
    },
    // 获取列表
    getGetRLList($state) {
      this.fullscreenLoadingIndex = true
      GetRLList(this.ruleForm).then((res) => {
        this.fullscreenLoadingIndex = false
        if (res.isSuccess) {
          this.selectNum = -1
          if ($state) {
            if (!res.data.length > 0) {
              this.planCurrSel = {}
              this.$store.dispatch('rightFold', true)
              $state.complete() // 加载完成的状态
            } else {
              const arr = res.data
              this.listYudata = [...this.listYudata, ...arr]
              if (res.data.length < this.ruleForm.limit) {
                $state.complete() // 加载完成的状态
              } else {
                $state.loaded() // 加载中的状态
              }
            }
            this.ruleForm.page++
          } else {
            this.listYudata = res.data
          }
        }
      }).catch(err => {
        this.fullscreenLoadingIndex = false
      })
    },
    // 删除
    getDeleteRehearsal(item) {
      this.$confirm('确定删除此方案?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteRehearsal({ id: item.id }).then((res) => {
          console.log(res)
          if (res.isSuccess) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.resetList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 计算
    CalcRehearsalSchemeli(item) {
      this.listYudata = this.listYudata.map(function (v) {
        return {
          ...v,
          calculationState: item.id === v.id ? '1' : v.calculationState
        }
      })
      CalcRehearsalScheme({ RehearsalID: item.id }).then((res) => {
        if (res.isSuccess) {
          this.getGetRehearsalState(item.id)
        }
      })
    },
    getGetRehearsalState(id) {
      GetRehearsalState({ ID: id }).then((res) => {
        this.RehearsalState = res.data
        if (res.data !== 2 || !res.isSuccess) {
          setTimeout(() => {
            this.getGetRehearsalState(id)
          }, 10000)
        } else {
          this.$message({
            type: 'success',
            message: '计算成功'
          })
          this.resetList()
        }
      })
    },
    // 退出方案
    withdraw() {
      this.loadList = true
      this.$store.getters.pageState.yuAn_YYYA_Load = true
      this.isRightTab = false
      this.isRightTab1 = false
      this.isRightTab2 = false
      this.tabTitListNum = 0;
      this.selectNum = -1;
      this.$store.dispatch('rightFold', true);
      this.ListStyleobj.stTime = '';
      this.ListStyleobj.enTime = '';
    },
    exportBtn() {
      const { href } = this.$router.resolve({ path: '/reserveplan/reserveplanReport?id=' + this.loadId })
      window.open(href, '_blank')
    },
     // 删除提示操作
    // 打开
    openTipDialog(item) {
      this.faId=item.id
      this.tipDialogShow = true
    },
    // 确认删除方案
    confirmTipDialog() {
      DeleteRehearsal({ id: this.faId }).then((res) => {
          //  console.log(res)
          if (res.isSuccess) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.resetList()
          }
        }).catch(() => { })
        
        this.resetList()
        this.tipDialogShow = false
    },
    // 取消删除方案
    cancelTipDialog() {
      this.$message({
          type: 'info',
          message: '已取消删除'
        })
      this.tipDialogShow = false
    },

    // 关闭删除提示弹窗
    closeTipDialog() {
      this.tipDialogShow = false
    },
  }
}
</script>

<style lang="less" scoped>
.btm_faxq {
  text-align: right;
  width: 100%;
  margin-top: 10px;

  .btnCjfa {
    padding: 10px;
    margin: 0 5px;
  }
}

.water-table {
  height: 93%;
  height: 700px;
}

.MeasuredDlgStyle {
  width: 70% !important;
  height: 700px !important;
  left: 15%;
  top: 5%
}

.section-box {
  width: 100%;
  height: 100%;
}

.top_llfxChart {
  height: 300px;
  margin-bottom: 10px;
}

.tableBox {
  height: calc(100% - 320px);

  .collapse_div {
    height: calc(100% - 20px);
    overflow: auto;
  }
}

.form_Rehearsal {
  border-bottom: 2px solid #335875;

  .el-form-item {
    margin-bottom: 5px;

    /deep/.el-radio-group {
      width: 100%;
      display: flex;
      justify-content: space-between;

      label {
        width: 30%;
        margin-right: 0;
      }
    }
  }

  /deep/ .el-radio-button__inner {
    padding: 10px 20.5px !important;
  }
}

.collapse_table>ul li .collapse_table_title {
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;

  p {
    width: 70%;
    color: #fff;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  span {
    padding: 5px;
    border-radius: 5px;
    height: 20px;
    line-height: 20px;
    margin-right: 2px;
    letter-spacing: -2px;
    // clip-path: polygon(22% 0, 80% 0%, 100% 0, 97% 100%, 80% 100%, 20% 100%, 0 100%, 0 31%);
  }
}

.orangeColor {
  color: #E3D400;
}

.greenColor {
  color: #00E344;
}

.noColor {
  color: #989595;
}

.errorColor {
  color: #db8282;
}

.btnCjfa_cur {
  text-align: right;
  padding-top: 10px;
  border-top: 1px dashed #335875;

  .btnCjfa {
    padding: 5px 10px;
    top: 0;
    margin: 0 5px;
  }
}

.tab {
  justify-content: center;
}

.tab .tabTit {
  padding: 0;
  width: 33%;
}

.margtop5 {
  margin-top: 5px;
}
</style>
<style lang="scss" scoped>
.yyLegendLeftGourp {
  position: absolute;
  left: 19.5%;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  z-index: 3;
}

.btn-center-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  bottom: 0px;
  display: flex;
  align-items: center;

  .btn {
    white-space: nowrap;
    height: 39px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: rgba(14, 81, 133, 0.61);
    border: 1px solid #0e5185;

    &:hover,
    &.active {
      box-shadow: rgb(11, 234, 235) 0px 0px 8px inset;
    }

    &.disabled {
      background: #000000;
      color: #cccccc;
      pointer-events: none;
    }
  }
}
</style>
